<template>
  <div
    class="footer-container"
    :style="{
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
      background: background,
    }"
  >
    <div class="upper">
      <div class="texts">
        <div class="address">
          <div class="title">联系地址</div>
          <div class="detail">
            四川省成都市高新区天府大道北段 869 号数字经济大厦 2001-2003
          </div>
        </div>
        <div class="phone">
          <div class="title">联系电话</div>
          <div class="detail">028-89106902</div>
        </div>
        <div class="link">
          <div class="title">快速链接</div>
          <a class="detail" href="http://www.chinasia.org.cn/">
            http://www.chinasia.org.cn/
          </a>
        </div>
      </div>
      <div class="qrcode">
        <div class="app">
          <div class="title">小程序</div>
          <img :src="qrcode" alt="" />
          <div class="detail">小程序</div>
        </div>
        <div class="pub">
          <div class="title">公众号</div>
          <img :src="qrcode" alt="" />
          <div class="detail">中安工业互联<br />微信公众号</div>
        </div>
      </div>
    </div>
    <div class="lower">
      <div class="left detail">
        Copyright © 2016-2023 中安工业互联网（成都）有限公司 &nbsp;&nbsp;&nbsp;
        蜀ICP备150232777号-12 &nbsp;&nbsp;&nbsp; 蜀公网安备 420173722775160号
      </div>
      <div class="right detail">
        <a>使用条款 </a>
        <span>｜</span>
        <a> 隐私政策</a>
      </div>
    </div>
  </div>
</template>

<script>
import qrcode from "@/assets/data/exports/qrcode.jpg";
export default {
  props: {
    p: {
      default: 6,
    },
    background: {
      type: String,
      default: "#2E354D",
    },
  },
  data() {
    return {
      qrcode,
    };
  },
};
</script>

<style lang="scss" scoped>
.footer-container {
  width: 100%;
  height: 340px;
  margin-top: 50px;
  padding: 40px 6vw;
  color: white;
  .detail {
    font-size: 14px;
    color: #b6b8c1;
    margin-bottom: 20px;
  }
  .upper {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #616677;
    padding-bottom: 25px;
    margin-bottom: 10px;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .link .detail {
      text-decoration: underline;
      cursor: pointer;
    }
    .qrcode {
      display: flex;
      justify-content: right;
      .detail {
        text-align: center;
        line-height: 24px;
      }

      .pub {
        margin-left: 60px;
      }

      img {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
      }
    }
  }
  .lower {
    display: flex;
    justify-content: space-between;
    .left {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .right {
      flex: 0 0 auto;
      a {
        cursor: pointer;
      }
    }
  }
}
</style>
